<template>
  <div class="is-tranfer-bill">
    <a-form ref="formRef" autocomplete="off" name="basic" :model="formState" :label-col="{ style: 'width:100px' }" :wrapper-col="{ style: 'calc(100% - 100px)' }">
      <a-form-item label="是否转运单" name="isTransferBill" :rules="[{ required: true, message: '请选择是否转运单!' }]">
        <a-radio-group v-model:value="formState.isTransferBill">
          <a-radio :value="0">否</a-radio>
          <a-radio :value="1">是</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>

    <div class="submit-btn-form-item">
      <a-button :loading="loading" type="primary" @click="onSubmit" v-debounce>保 存</a-button>
      <a-button @click="resetForm">取 消</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { isTransferBillApi } from "@/api/waybillManagement/customerServiceWaybill";
import { message } from "ant-design-vue";
import { reactive, ref, toRefs, watch } from "vue";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: Array<CustomerServiceWaybill.ListRows>;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "submit"): void;
  (e: "update:visible", visible: boolean): void;
}>();

const { visible, passData } = toRefs(props);

//表单数据
const formState = reactive<{ isTransferBill: number }>({
  isTransferBill: 0 //是否转运单
});
const loading = ref<boolean>(false);
const formRef = ref<any>(null);

const resetForm = () => {
  formRef.value.resetFields();
  emit("update:visible", false);
};

const onSubmit = () => {
  formRef.value.validate().then(() => {
    loading.value = true;
    const params = {
      idList: passData.value.map((t: any) => t.id),
      ...formState
    };
    isTransferBillApi(params)
      .then((res: any) => {
        const { code } = res;
        if (code === 200) {
          message.success("操作成功!");
          emit("submit");
        }
      })
      .finally(() => {
        loading.value = false;
      });
  });
};

watch(
  () => visible.value,
  v => {
    if (!v) {
      resetForm();
    }
  }
);
</script>
<style lang="stylus" scoped></style>
